<script setup>
import { ref } from 'vue';
import { changePage } from '../tools/linkTo';

</script>

<template>
    <h1>Target Start</h1>
    <div class="select">
        <div @click="changePage('mapEditor')">Map Editor</div>
        <div @click="changePage('instructions')">Instructions</div>
        <div @click="changePage('mapPreview')">Continue</div>
        <div @click="changePage('mapEditor')">Load Map File</div>
    </div>
</template>

<style scoped>
h1{
    padding: 80px 0;
    text-align: center;
    font-size: 64px;
    font-family: 'Segoe Script';
}
.select{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
    font-size: 28px;
    font-family: 'Segoe Script';
    color: lightslategray;
}
.select div:hover{
    cursor: pointer;
    color: black;
}
</style>
